
<template>
    <div class="signin">
        <div class="clearfix">
            <div class="fl signin-le">
                <div class="logo-a">
                    <a href="/">
                        <img src="@/assets/img/logo1.svg" alt="">
                    </a>

                </div>
                <div class="tile-en">
                    Creativity
                    <br />Empowering your
                    <br /> business

                </div>
                <div class="tile-cn">
                    用更好的创意
                    <br />为您的企业赋能

                </div>

            </div>
            <div class="fr signin-re">
                <div class="signin-box">
                    <p class="signin-title">登录</p>
                    <div class="signin-cjzh">
                        新用户？ <a href="/register">创建帐户</a>
                    </div>
                    <form>
                        <ul class="signin-ul">
                            <!-- <li>
                                
                                <input type="text" placeholder="手机号/用户名/电子邮件">

                            </li>
                            <li class="possword">
                                <input type="text" placeholder="密码">

                                                                                                                                                                                                                                                                        </li> -->

                            <li>

                                <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm"
                                    class="demo-loginForm">
                                    <el-form-item prop="mobile">
                                        <el-input type="text" v-model="loginForm.mobile" autocomplete="off"
                                            placeholder="手机号/用户名/电子邮件">
                                        </el-input>
                                    </el-form-item>


                                    <el-form-item prop="password">
                                        <el-input type="password" v-model.number="loginForm.password" placeholder="密码"
                                            @keydown.enter="submitForm('loginForm')"></el-input>
                                    </el-form-item>

                            <li class="tr password-li">
                                <a href="">忘记密码？</a>
                            </li>
                            <el-form-item class="login">
                                <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
                            </el-form-item>
                            </el-form>

                            </li>



                            <!-- <li class="sign-btn">
                                <button>登录</button>
                                        </li> -->
                            <li class="other-li">
                                <span> 其他方式登录</span>
                            </li>
                            <li class="wexin-li">
                                <span @click="show">
                                    <i class="iconfont icon-weixin"></i>
                                </span>

                            </li>
                        </ul>
                    </form>


                </div>


            </div>

        </div>
        <!--  二维码登录-->


        <QrLogin ref="qrogin"></QrLogin>

    </div>
</template>

<script >
import QrLogin from '@/components/QrLogin.vue'
import * as api from "@/api/users"
import storage from "@/utils/storage"
import useUsers from "@/store/users"
import { ElLoading } from "element-plus"
import { ElMessageBox } from 'element-plus'

// 使用store的users的数据
let usersStore = useUsers()

// 校验用户名
var validateUsername = (rule, value, callback) => {
    var uPattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    // 如果校验通过，直接回调callback（）
    // 如果校验不通过，callback中传参数
    if (uPattern.test(value)) {
        callback()
    } else {
        callback('请输入正确手机号码')
    }
};
// 校验密码
var validatePassword = (rule, value, callback) => {
    if (value) {
        callback()
    } else {
        callback('请输入密码')
    }
};
export default {
    data() {

        return {
            loginForm: {
                mobile: '',
                password: ''
            },
            rules: {
                mobile: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ]
            }
        };
    },



    components: {
        QrLogin
    },

    methods: {
        async show() {
            this.$refs.qrogin.isshow = true;

        },

        // 表单校验
        submitForm(formName) {


            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 登入
                    // 1.获取后台的验证码
                    // 2.进行本地校验
                    // 3.本地校验通过 
                    // 4.成功和失败

                    const loading = ElLoading.service({
                        lock: true,
                        text: '正在登入...',
                        background: 'rgba(0,0,0,0.7)'
                    })
                    // 本地校验通过
                    let { mobile, password } = this.loginForm
                    api.loginApi(mobile, password)

                        .then(res => {
                            // 登入成功 
                            console.log(res, '123')


                            if (res.data.code === 1) {

                                // 存储用户信息到本地
                                // this.storageUserInfo(res.data)
                                // 现在用session存储
                                sessionStorage.setItem('bm-token', res.data.data.token)
                                // 存储用户信息到pinia
                                // usersStore.setUserInfo(res.data.data.user)
                                let userInfo = res.data.data.user
                                let userInfoStr = JSON.stringify(userInfo)
                                sessionStorage.setItem('userInfo', userInfoStr)
                                // sessionStorage.setItem('userInfo',res.data.data.user)
                                // 跳转到主页
                                this.$router.push("/")
                                // 关闭全屏的loading动画
                                loading.close()
                            } else {
                                ElMessageBox({
                                    title: '错误提示',
                                    type: 'error',
                                    message: res.data.msg,

                                })

                                return Promise.reject()
                                loading.close()

                            }
                        })
                        .catch(() => {
                            loading.close()
                        })
                }
            });
        },

        resetForm(formName) {
            this.$refs[formName].resetFields();
        },




    }


}

</script>

<style lang="less" scoped>
/deep/ .el-input {
    width: 100% !important;
    border-radius: 1.875rem;
}

/deep/ .el-input__wrapper {
    border-radius: 1.875rem;

}

/deep/ input:hover {
    box-shadow: 0 0 0 0rem transparent !important;

}

/deep/ input:focus {
    border-color: transparent !important;
    box-shadow: 0 0 0 0rem transparent !important;
}

/deep/ .el-input.is-focus,
.el-input__wrapper.is-focu {
    input:focus {
        border: none !important;
        ;
        box-shadow: 0 0 0 0 rgba(234, 76, 137, .25) !important;
    }


}

.el-button {
    width: 100%;
    border-radius: 1.875rem;
}

.login button {
    background: #EA4C89;
    border-radius: 1.875rem;
    border: none;
}
</style>
